<template>
	<view class="">
		
		<view class="container u-skeleton">
			<u-navbar class="navbar u-skeleton-fillet" :border-bottom="false"  title="商品详情" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: '#fff'}">
			</u-navbar>
			<view :style="tabsStyle" class="tabs u-flex u-row-around u-font-32">
				<view :style="0 == current ? tabsActiveStyle : tabsTitleStyle" @click="clickSub(0)">商品</view>
				<view :style="1 == current ? tabsActiveStyle : tabsTitleStyle" @click="clickSub(1)">评价</view>
				<view :style="2 == current ? tabsActiveStyle : tabsTitleStyle" @click="clickSub(2)">详情</view>
			</view>
			<!-- 商品图片轮播 -->
			<banner class="shangpin u-skeleton-fillet" :swiper-list="swiperList" :is-show="isShow" :video="video" :video-cover-img="videoCoverImg"></banner>
			<!-- 价格规格 -->
			<view class="box-padding u-m-b-20 box-color">
				<view class="u-flex u-row-between">
					<view class="u-flex u-col-center">
						<view class="u-skeleton-fillet" 
						v-if="!product.sellerItems"
						:style="{fontSize: '52rpx', color: badgeColor}">￥{{ product.price }}<text>/{{product.unit}}</text>
						</view>
						<view class="u-skeleton-fillet"
						v-else
						:style="{fontSize: '52rpx', color: badgeColor}"> <s>￥{{ product.price }}</s> <text> <s>/{{product.unit}} </s> </text>
						</view>
						<!-- <text>/ <s>{{product.unit}} </s></text> -->
						<view class="text-tip">
							终端指导价
						</view>
					</view>
					<image src="/static/common/tiaoCode.png" v-if="product.barcode" style="width: 40rpx;height: 30rpx;" @click="barcodeShow = true"></image>
				</view>
				<view class="u-flex u-row-between" >
					<view>
						<view class="u-font-32 text-bold u-skeleton-fillet">{{ product.name }}</view>
						<text class="u-skeleton-fillet" style="color: #666; font-size: 28rpx;">
							规格：{{ product.specification }}
						</text>
					</view>
					<open-tmall v-if="product.tmallUrl" :tmallUrl="product.tmallUrl"></open-tmall>
					<!-- <view class="u-flex  u-p-l-20 u-p-r-10" style="border: 1px solid #ff551a; border-radius: 20rpx;" v-if="product.tmallUrl">
						<view class="iconfont icon-tianmao4" style="color:#ff551a;font-size: 48rpx;margin-right: 10rpx;" @click="openTm()"></view>
						<u-icon name="arrow-right" color="#ff551a" size="20"></u-icon>
					</view> -->
				</view> 
				<view class="u-m-t-28 u-m-b-28 " style="height: 1rpx;background-color: #000000; opacity: .1;"></view>
				<view class="u-flex u-row-between ">
					<!-- @click="toShopHome(sellerShopId)" -->
					<view>
						<view class="owner-mark">品牌商</view>
						<text class="u-font-26 info-color u-skeleton-fillet"  >{{ product.brandOwnerName }}</text>
					</view>
					<!-- <u-icon name="arrow-right" size="28" color="#666"></u-icon> -->
				</view>
			</view>
			<!-- 购买商品显示部分 -->
			<view class="">
				<view class="box-padding u-m-b-20 box-color u-flex u-row-between" v-if="!storeUser.id">
					<view style="font-size: 26rpx; color: #999;"> 您还未登录，点击登录查看更多精彩~</view>
					<view class="sn-btn" @click="goLogin()">
						登录
					</view>
				</view>
				<view class="box-padding u-m-b-20 box-color" v-else-if="dropDownShopList.length == 0">
					<view style="font-size: 26rpx; color: #999;"> 您还未签约销售商，暂不能购买，快去签约吧~</view>
				</view>
				<view class="box-padding u-m-b-20 box-color u-flex u-row-between" style="overflow: hidden;" 
				v-else-if="(!product.sellerItems)&&sellerShopId">
					<view style="font-size: 26rpx; color: #999;flex;1;"> 您还未签约本品，请点击按钮发送签约申请，等待卖家联系。</view>
					<view class="sn-btn" style="min-width:160rpx;" @click="signApply()">
						签约申请
					</view>
				</view>
				<view v-if="product.sellerItems">
					<view class="box-padding u-m-b-20 box-color u-flex u-col-top" v-for="item in product.sellerItems" :key="item.id" style="overflow: hidden;">
						<image :src="item.logoUrl?item.logoUrl:defaultLogo" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
						<view class="u-flex-1 u-m-l-20">
							<view class="u-flex u-row-between"> 
								<view>
									<view class="u-font-28" style="font-weight: 500;">{{item.sellerName}}</view>
									<view class="u-font-26" style="color: #666;" >
										{{item.inventoryStatus}}
									</view>
								</view>
								<view>
									<view class="u-skeleton-fillet"
									:style="{fontSize: '44rpx', color: '#FF551A',fontWeight:'bold'}">
									￥{{ item.price }}
									</view>
								</view>
							</view>
							<view class="u-flex u-row-between u-m-t-18">
								<view class="text-tip u-font-24" style="margin-left: 0;color:#FFBB1A;border-color: #FFBB1A;">
									最小销售单位 {{item.sellingUnit||0}}{{item.unit||'瓶'}}
								</view>
								<view class="sn-btn" @click="newAddCartBtnClickFn(item)">
									加入购物车
								</view>
							</view>
						</view>
					</view>
				</view>
				
			<!-- 	<view class="box-padding u-m-b-20 box-color " style="overflow: hidden;" v-if="sellerShopId">
					<view class="shop-item u-flex u-row-between u-col-center" >
						<view class="u-flex u-col-center">
							<image :src="product.logoUrl?product.logoUrl:defaultLogo" mode="" class="shop-logo"></image>
							<text class="shop-name u-m-l-20">{{product.brandOwnerName}}</text>
						</view>
						<view class="go-shop" @click="toShopHome(sellerShopId)">进店</view>
					</view>
				</view> -->
				
			</view>
			
			
			<!-- 评价 -->
			<ping-jia class="pingjia" :itemId="id" :comment-count="commentCount" :comment="commentList" v-if="storeUser.id&&dropDownShopList.length != 0"></ping-jia>
			<!-- 关单卫检 -->
			<bill-list :itemId="id" :itemName="product.name" v-if="storeUser.id&&dropDownShopList.length != 0"></bill-list>
			<!-- 详情 表格 -->
			<jie-shao class="xiangqing" :product="product"></jie-shao>
			<!-- 详情 图片 -->
			<view style="font-size: 0;">
				<u-lazy-load class="u-skeleton-fillet" v-for="(item, index) in detailList" :key="index" :image="item.detailImages" @click="previewImg(index)"></u-lazy-load>
			</view>
			<!-- 占位div -->
			<view style="height: 160rpx;"></view>
			<!-- 底部固定加入购物车 -->
			<view v-if="!showChoseNum&&authShow" class="footer">
				<view class="u-flex u-row-between " style="width: 100%;">
					<view class="u-flex u-row-center  u-p-t-30" @click="toKefu" style="flex:1;border-right: 1px solid #e5e5e5;">
						<image src="/static/home/kefu.png" style="width: 80rpx;height: 80rpx" mode="" class="u-skeleton-circle" ></image>
						<view class="u-m-l-30 u-font-28"> 联系客服</view>
					</view>
					<view class="u-flex u-row-center u-p-t-30"  @click="toCart()" style="flex:1">
						<view class="u-flex u-m-l-30 u-col-center u-row-center u-skeleton-circle"  style="width: 80rpx;height: 80rpx;background-color: #FFBB1A;border-radius: 50%;">
							<u-icon name="shopping-cart" size="50"></u-icon>
						</view>
						<view class="u-m-l-30 u-font-28"> 购物车</view>
					</view>
					
				</view>
				<!-- <view class="u-flex">
					<u-button class="u-m-r-20 u-skeleton-fillet"  hover-class="none" :ripple="true" shape="circle" :hair-line="false" :custom-style="getBtStyle('plain')" @click="showChose(1)">加入购物车</u-button>
					<u-button shape="circle" hover-class="none" class="u-skeleton-fillet" :hair-line="false" :ripple="true" :custom-style="getBtStyle('default')" @click="showChose(2)">立即下单</u-button>
				</view> -->
			</view>
			<!-- 选择数量 -->
			<view v-if="showChoseNum" class="chose-num box-padding">
				<view class="u-flex u-row-between" style="height: 111rpx; padding-bottom: 20rpx;">
					<text class="text-bold">下单数量</text>
					<number-box box-width="100rpx" width="200rpx" height="50rpx" fontSize="28rpx" :value="quantity" :step="product.sellingUnit?product.sellingUnit:1" :min="product.sellingUnit?product.sellingUnit:1" :max="product.inventoryBalance" @change="updateQuantity"></number-box>
				</view>
				<view class="u-p-35 u-m-b-30" style="background-color: #f8f8f8;border-radius: 10rpx;" v-if="choseType != 1">
					<view class="u-flex" >
						<view style="flex:1;">
							<view class="u-text-center u-font-28" style="color:#999;">起购金额</view>
							<view class="u-text-center u-font-32 u-m-t-14" style="font-weight: 500;color: #333;">{{product.baseValue?('￥'+product.baseValue):'无'}}</view>
						</view>
						<view style="flex:1;"> 
							<view class="u-text-center u-font-28" style="color:#999;">当前金额</view>
							<view class="u-text-center u-font-32 u-m-t-14" :style="{fontWeight: 500,color: $mHelper.mul(quantity,product.price)>=product.baseValue?'#348f3b':'#FF551A'}">￥{{$mHelper.mul(quantity,product.price)}}</view>
						</view>
					</view>
					<view class="u-flex u-font-12 u-m-t-30 u-row-center u-text-center" v-if="$mHelper.mul(quantity,product.price)<product.baseValue">
						<u-icon name="info-circle" style="margin-top: 6rpx;color:#999" ></u-icon>
						<text style="color: #999;">当前金额不足起购金额，请继续增加下单数量</text>
					</view>
				</view>
				<view class="u-p-20 u-m-b-30" style="color: #999;background-color: #f8f8f8;border-radius: 10rpx;" v-if="choseType == 1">
					最小销售单位{{product.sellingUnit||1}} {{product.unit||'瓶'}}
				</view>
				<u-button shape="circle" hover-class="none" :ripple="true" :hair-line="false" 
				:custom-style="($mHelper.mul(quantity,product.price)>=product.baseValue)||choseType==1?getBtStyle('default'):noBaseValueStyle" 
				@click.native="handleSubmit">{{ choseType == 1 ? '加入购物车' : '立即下单' }}</u-button>
			</view>
			<!-- 新版加入购物车弹窗 -->
			<view v-if="newAddCart" class="chose-num box-padding">
				<view class="u-flex u-row-between" style="height: 111rpx; padding-bottom: 20rpx;">
					<text class="text-bold">下单数量</text>
					<number-box box-width="100rpx" width="200rpx" height="50rpx" fontSize="28rpx" :value="quantity" 
					:step="newCartData.sellingUnit?newCartData.sellingUnit:1" :min="newCartData.sellingUnit?newCartData.sellingUnit:1" 
					:max="newCartData.inventoryBalance" @change="updateQuantity"></number-box>
				</view>
				<view class="u-p-20 u-m-b-30" style="color: #999;background-color: #f8f8f8;border-radius: 10rpx;">
					最小销售单位{{newCartData.sellingUnit||1}} {{newCartData.unit||'瓶'}}
				</view>
				<u-button shape="circle" hover-class="none" :ripple="true" :hair-line="false" 
				:custom-style="getBtStyle('default')" 
				@click.native="newAddCartFn">加入购物车</u-button>
			</view>
			<!-- 遮罩层 -->
			<u-mask :show="showChoseNum" :z-index="888" :custom-style="{background: 'rgba(0, 0, 0, 0.3)'}" @click="showChoseNum = false"></u-mask>
			<u-mask :show="newAddCart" :z-index="888" :custom-style="{background: 'rgba(0, 0, 0, 0.3)'}" @click="newAddCart = false"></u-mask>
			<u-modal v-model="noShopModal" :content="content" @confirm="goLogin()"></u-modal>
			<u-modal v-model="noShopModal2" :content="content2" ></u-modal>
			<u-modal v-model="barcodeShow" :title="'商品编码'" :show-cancel-button="false" :content="product.barcode" ></u-modal>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import Banner from './xiangqing/banner.vue'
	import PingJia from './xiangqing/pingjia.vue'
	import JieShao from './xiangqing/jieshao.vue'
	import BillList from './xiangqing/billList.vue'
	import NumberBox from '@/components/number-box/index.vue'
	import { useShopStore } from '@/store/shop.js';
	import { useUserStore } from '@/store/user.js';
	import { useCartStore } from '@/store/cart.js';
	import { mapState } from 'pinia';
	import openTmall from '@/components/open-tmall.vue'
	export default {
		components: { Banner, PingJia, JieShao, NumberBox,BillList,openTmall },
		data() {
			return {
				loading:false,
				noShopModal:false,
				noShopModal2:false,
				content:"请先登录，该功能只对企业客户开放",
				content2:"您还没有加入任何企业，该功能只对企业客户开放",
				id: null,
				sellerShopId: null,
				product: {},
				video: '',
				videoCoverImg: '',
				isShow: true,
				swiperList: [],
				detailList: [],
				commentList: [],
				commentCount: 0,
				pingjiaTop: 0,
				xiangqingTop: 0,
				tabsStyle: {
					opacity: 0,
					backgroundColor: '#FFFFFF',
				},
				tabsTitleStyle: {
					opacity: 0,
					color: this.greyColor,
					fontSize: '32rpx',
				},
				tabsActiveStyle: {
					opacity: 0,
					color: this.textColor,
					fontSize: '32rpx'
				},
				noBaseValueStyle:{
					"backgroundColor": "#ccc",
					"color": "#fff",
					"fontSize": "28rpx",
					"border": 0
				},
				current: 0,
				showChoseNum: false,
				quantity: 1,
				choseType: 1,
				authShow:true,
				newAddCart:false,
				newCartData:{},
				barcodeShow:false,
			}
		},
		async onLoad(options) {
			// 加载数据
			this.loading = true;
			this.id = options.id
			this.sellerShopId = options.sellerShopId;
			// this.authShow = options.auth == 0?false:true;
			await this.getProductInfo()
			// 获取评价
			if(this.sellerShopId){
				await this.getComment()
			}
			this.loading = false;
		},
		onReady() {
			// 获取评价高度
			uni.createSelectorQuery().select('.pingjia').boundingClientRect(data => {
				this.pingjiaTop = data.top
			}).exec();
			// 获取详情高度
			uni.createSelectorQuery().select('.xiangqing').boundingClientRect(data => {
				this.xiangqingTop = data.top
			}).exec();
		},
		onUnload() {
			this.quantity = 1
		},
		onPageScroll: function(e){
			const opacity = e.scrollTop / 300
			this.tabsStyle.opacity = opacity;
			this.tabsTitleStyle.opacity = opacity;
			this.tabsActiveStyle.opacity = opacity;
			// 滚动双向绑定tabs
			if (e.scrollTop >= this.pingjiaTop - 150) {
				this.current = 1
			} else {
				this.current = 0
			}
			if (e.scrollTop >= this.xiangqingTop - 150) {
				this.current = 2
			}
		},
		computed:{
			...mapState(useUserStore, {storeUser: 'user'}),
			...mapState(useCartStore,['settlementInfo']),
			
			...mapState(useShopStore, {
				storeShop: 'shop',
				dropDownShopList:'dropDownShopList'
			}),
		},
		methods: {
			signApply(){
				// #ifdef APP-PLUS
				this.toKefu();
				// #endif
				// #ifndef APP-PLUS
				this.$u.toast('已发送申请');
				// #endif
			},
			openTm(){
			 // #ifdef APP-PLUS
				if (plus.os.name == 'Android') {
					plus.runtime.launchApplication(  
						{  
							pname: 'com.tmall.wireless'  
						},  
						function(e) {  
							this.$u.toast('打开天猫失败')
							console.log('Open system default browser failed: ' + e.message);  
						}  
					);  
				} else if (plus.os.name == 'iOS') {  
					plus.runtime.launchApplication({ action: 'tmall://' }, function(e) {  
						this.$u.toast('打开天猫失败')
						console.log('Open system default browser failed: ' + e.message);  
					});   
				}
				// #endif
				// #ifdef APP-HARMONY
					console.log('asdasd');
					openURL('com.tmall.tmall')
				// #endif
				// #ifndef APP-PLUS
					window.open(this.product.tmallUrl)
				// #endif
			},
			goLogin(){
				this.$mRouter.push({ route: '/pages/login/index' });
			},
			toShopHome(id){
				// this.$mRouter.push({ route: '/pages/sale/homePage/index?id='+id });
				uni.navigateBack()
			},
			// 改版后添加购物车按钮点击
			newAddCartBtnClickFn(item){
				const Purchase = this.storeUser.menuCodes.includes('Purchase');
				if (!Purchase) {
					return this.$u.toast('当前账号没有下单权限，请联系企业管理员处理~');
				}
				if(item.inventoryBalance<=0||item.inventoryBalance<item.sellingUnit){
					this.$u.toast('库存不足！');;
					return false;
				}
				this.newCartData = item;
				this.newAddCart = true;
				this.quantity = item.sellingUnit;
			},
			async newAddCartFn(){
				let params = {
					itemId: this.product.id,
					sellerShopId: this.newCartData.sellerId,
					quantity: this.quantity,
					buyerShopId: this.storeShop.id
				}
				const res = await this.$newHttp.post('api/ShoppingCart/AddShoppingCart', params);
				if (res.code == 200) {
					this.newAddCart = false;
					return this.$u.toast('添加购物车成功', 1000, 'success');
				}else{
					this.newAddCart = false;
					this.$u.toast('加入购物车失败，错误信息：'+res.erroMessage);
				};
			},
			toCart(){
				if(!this.storeUser.id){
					this.noShopModal = true;
					return false;
				}else if(!this.storeShop.id){
					this.noShopModal2 = true;
						return false;
				}else{
					const Purchase = this.storeUser.menuCodes.includes('Purchase')
					if (!Purchase) {
						return this.$u.toast('该账号没有查看购物车的权限');
					}else{
						// this.$mRouter.switchTab({ route: '/pages/cart/index' })
						// this.$mRouter.push({ route: '/pages/cart/index'})
						uni.navigateTo({
							url: '/pages/cart/index',
						});
					}
				}
			},
			// 获取数据
			async getProductInfo() {
					let params = {
						id: this.id,
					};
				if(this.sellerShopId){
					params.SellerId = this.sellerShopId
					
				}
				if(this.storeShop.id){
					params.BuyerId = this.storeShop.id
					
				}
				const res = await this.$http.get('api/v1.2/ShanNiang/GetItemDetail', { params: params })
				this.product = res
				this.sellingUnit = res.sellingUnit ? res.sellingUnit : 1
				this.quantity = res.sellingUnit ? res.sellingUnit : 1
				// 轮播图数组
				this.swiperList = res.itemFocus
				// 视频
				if (res.videoResourceId) {
					this.video = res.videoResourceUrl
				}
				for (var i = 0; i < res.itemDetails.length; i++) {
					// res.itemDetails[i].detailImages = 
					res.itemDetails[i].detailImages = res.itemDetails[i].url?res.itemDetails[i].url:(this.resourcesUrl + res.itemDetails[i].resourceId)
				}
				// 详情图片
				this.detailList = res.itemDetails
				
				// 轮播封面
				this.videoCoverImg = res.videoCoverResourceId ? res.videoCoverUrl :  res.itemFocus[0]['url']
			},
			// 获取评价数据
			async getComment() {
				const res = await this.$http.get('api/Trade/PageTradeComment', { params: { itemId: this.product.id, pageIndex: 1, pageSize: 3 } })
				if (!res.list) return
				this.commentList = res.list
				this.commentCount = res.totalCount
			},
			clickSub(index) {
				// 设置锚点
				let className = '';
				switch(index) {
						case 0:
								className = '.shangpin'
								break;
						case 1:
								className = '.pingjia'
								break;
						case 2:
								className = '.xiangqing'
								break;
						default:
								break;
				}
				uni.createSelectorQuery().select(className).boundingClientRect(data=>{//目标位置的节点：类或者id
					uni.createSelectorQuery().select(".container").boundingClientRect(res=>{//最外层盒子的节点：类或者id
						uni.pageScrollTo({
							duration: 0,//过渡时间
							scrollTop:data.top - res.top - 130  ,//到达距离顶部的top值
						})
					}).exec()
				}).exec();
				this.current = index
			},
			// 添加到购物车
			async addCart() {
				const data = this.getParams()
				const res = await this.$http.post('api/ShoppingCart/AddShoppingCart', data)
				if (res) {
					return this.$u.toast('添加成功', 1000, 'success')
				}
			},
			showChose(type) {
				if(!this.storeUser.id){
					this.noShopModal = true;
					return false;
				}
				else if(!this.sellerShopId){
					this.noShopModal2 = true;
						return false;
				}
				const Purchase = this.storeUser.menuCodes.includes('Purchase');
				if (!Purchase) {
					return this.$u.toast('该账号没有下单权限')
				}
				if( this.product.inventoryBalance<this.product.sellingUnit)
				{
					return this.$u.toast('库存不足无法下单')
				}
				this.choseType = type
				this.showChoseNum = true
			},
			handleSubmit() {
				if (this.choseType == 1) {
					this.addCart()
				} else {
					const total = this.quantity * this.product.price
					// 判断是否满足起购金额
					if (total < this.product.baseValue) {
						return this.$u.toast(`起购金额为${this.product.baseValue},当前下单金额为${total}`, 3000)
					}
					const info = {
						sellerShopId: this.product.sellerShopId,
						sellerShopName: this.product.sellerShopName,
						total: total,
						shoppingCartItems: [
							{
								itemId: this.product.id,
								itemName: this.product.name,
								price: this.product.price,
								quantity: this.quantity,
								resourceId: this.product.resourceId,
								specification: this.product.specification
							}
						]
					}
					this.settlementInfo(info);
					this.$mRouter.push({ route: '/pages/cart/jiesuan' })
				}
				this.showChoseNum = false
			},
			// 获取参数
			getParams() {
				return {
					itemId: this.product.id,
					sellerShopId: this.product.sellerShopId,
					quantity: this.quantity,
					buyerShopId: this.storeShop.id
				}
			},
			// 修改数量
			updateQuantity(value) {
				this.quantity = value
			},
			// 商品详情预览图片
			previewImg(index) {
				const imageArr = this.detailList.map((row) => {
					return row['detailImages'];
				});
				uni.previewImage({
					current: index,
					urls: imageArr,
					indicator: 'number',
					loop: true
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";
	.sn-btn{
		box-sizing: border-box;
		padding: 14rpx 32rpx;
		background-color: #ffbb1a;
		color: #333;
		font-size: 24rpx;
		border-radius: 30rpx;
	}
	.text-tip{
		font-size: 24rpx;
		color: #999;
		border: 1px solid #999;
		border-radius:30rpx;
		box-sizing: border-box;
		padding: 8rpx 14rpx;
		margin-left: 10rpx;
	}
	.shop-item{
		box-sizing: border-box;
		border-bottom: 1px solid #e5e5e5;
		&:nth-last-of-type(1){
			border: none;
		}
		.shop-logo{
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}
		.shop-name{
			color: #333;
			font-size: 28rpx;
		} 
		.go-shop{
			box-sizing: border-box;
			padding: 14rpx 30rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
			background-color: #ffbb1a;
		}
	}
	.owner-mark {
			display: inline;
			border-radius: 5rpx;
			color: #ff551a;
			border: 1px solid #ff551a;
			font-size: 14rpx;
			padding: 5rpx 11rpx;
			margin-right: 10rpx;
		}
	.tabs {
		height: 100rpx;
		position: fixed;
		z-index: 99;
		width: 100%;
		.active {
			color: $theme-color;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.footer {
		min-height: 140rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 30rpx 35rpx;
		z-index: 9;
		border-top: 1rpx solid #EEEEEE;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.chose-num {
		// height: 250rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 999;
		padding-bottom: env(safe-area-inset-bottom);
	}
	// 销售单位
	.sale-unit {
		position: absolute;
		right: 0;
		border: 1rpx solid $theme-color;
		border-right: none;
		padding: 5rpx 35rpx 10rpx 26rpx;
		border-radius: 50rpx 0 0 50rpx;
	}


</style>
